<template>
  <mheader />
  <div style="margin-top: 75px">
    <div
      style="
        height: 500px;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
      "
      class="bg-gray-200"
    >
      <!-- 轮播图 -->
      <div class="container">
        <swiper
          :modules="modules"
          :loop="true"
          :slides-per-view="1"
          :space-between="50"
          :speed="300"
          :autoplay="{
            delay: 3000,
            disableOnInteraction: true,
            stopOnLastSlide: false,
          }"
          :navigation="navigation"
          :pagination="{ clickable: true }"
          :scrollbar="{ draggable: false }"
          class="swiperBox swiperstyle"
          :simulateTouch="false"
        >
          <swiper-slide
            v-for="(imgitem, index) in ImgAddress"
            :key="index"
            @click="pushRead(imgitem)"
            class="relation"
          >
            <div class="absolute top-4 left-4 text-white">
              {{ imgitem.comicName }}
            </div>
            <img :src="'/api/' + imgitem.picture" class="swiperimg"
          /></swiper-slide>
          <!-- 左右按钮 -->
          <div class="swiper-button-prev" @click.stop="" />
          <div class="swiper-button-next" />
          <!-- 页码栏 -->
          <div class="swiper-pagination" />
        </swiper>
      </div>
      <!-- <div class="rank">
        <el-card class="el-card">
          <template #header>
            <div class="card-header">
              分类
              <el-dropdown>
                <span>
                  分类
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>热度榜</el-dropdown-item>
                    <el-dropdown-item>收藏榜</el-dropdown-item>
                    <el-dropdown-item>点赞榜</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          <div class="card-list">123</div>
        </el-card>
      </div> -->
    </div>
    <div class="classify">
      <div>
        <ul>
          <li v-for="(list, index) in leadlist" :key="index">
            <a :href="'/classify?type=' + list.name">{{ list.name }}</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 推荐第一部分 -->
    <div class="suggest-container">
      <div class="flex flex-col justify-center items-center">
        <div class="suggest-title">热门推荐</div>
        <div class="book-container grid grid-cols-5">
          <comicCard
            v-for="(item, index) in homeList['热门推荐']"
            :key="index"
            class="cursor-pointer book-card"
            :obj="item"
          ></comicCard>
        </div>
      </div>
      <!-- 推荐第二部分 -->
      <div class="flex flex-col justify-center items-center">
        <div class="suggest-title">科幻</div>
        <div class="book-container grid grid-cols-5">
          <comicCard
            v-for="(item, index) in homeList['科幻']"
            :key="index"
            class="cursor-pointer book-card"
            :obj="item"
          ></comicCard>
        </div>
      </div>
      <!-- 推荐第二部分 -->
      <div class="flex flex-col justify-center items-center">
        <div class="suggest-title">古风</div>
        <div class="book-container grid grid-cols-5">
          <comicCard
            v-for="(item, index) in homeList['古风']"
            :key="index"
            class="cursor-pointer book-card"
            :obj="item"
          ></comicCard>
        </div>
      </div>
      <div class="flex flex-col justify-center items-center">
        <div class="suggest-title">武侠</div>
        <div class="book-container grid grid-cols-5">
          <comicCard
            v-for="(item, index) in homeList['武侠']"
            :key="index"
            class="cursor-pointer book-card"
            :obj="item"
          ></comicCard>
        </div>
      </div>
      <div class="flex flex-col justify-center items-center">
        <div class="suggest-title">热血</div>
        <div class="book-container grid grid-cols-5">
          <comicCard
            v-for="(item, index) in homeList['热血']"
            :key="index"
            class="cursor-pointer book-card"
            :obj="item"
          ></comicCard>
        </div>
      </div>
    </div>
    <bottom> </bottom>
  </div>
</template>
<script>
import mheader from "@/components/home-header.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation } from "swiper";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { ArrowDown } from "@element-plus/icons-vue";
import { ref } from "vue";
import comicCard from "@/components/comicCard.vue";
import bottom from "@/components/bottom-rail.vue";
import request from "@/axios/http";

export default {
  name: "home",
  components: {
    mheader,
    Swiper,
    SwiperSlide,
    ArrowDown,
    comicCard,
    bottom,
  },
  data() {
    return {
      currentindex: 0,
      timer: null,
      ImgAddress: [],
      card_rank: [],
      title: "",
      homeList: [],
      leadlist: [
        {
          name: "魔幻",
        },
        {
          name: "科幻",
        },
        {
          name: "热血",
        },
        {
          name: "都市",
        },
        {
          name: "灵异",
        },
        {
          name: "武侠",
        },
        {
          name: "现代",
        },
        {
          name: "古风",
        },
      ],
    };
  },
  methods: {
    changeLeft() {
      this.currentindex--;
    },
    changeRight() {
      this.currentindex++;
    },
    pushDetail() {
      this.$router.push({ path: "detail", query: { id: 1 } });
    },
    pushRead(item) {
      this.$router.push({
        path: "read",
        query: { name: item.comicName, chapterNumber: 1 },
      });
    },
    getListSwiper() {
      // 获取轮播图
      request({
        url: "carousel/getAllCarousel",
        method: "post",
        data: {
          pageNum: 1,
          pageSize: 10,
          data: {},
        },
      }).then((res) => {
        if (res.code == 200) {
          this.ImgAddress = res.data.records;
        } else {
        }
      });
    },
    getListHome() {
      request({
        url: "comic/getMain",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.homeList = res.data;
        } else {
        }
      });
    },
  },
  mounted() {
    this.getListSwiper();
    this.getListHome();
  },
  setup() {
    const navigation = ref({
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    });
    const modules = [Autoplay, Pagination, Navigation];
    const nextEl = () => {};
    const prevEl = (item) => {};
    const onSlideChange = (swiper) => {
      // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
      console.log(swiper.activeIndex);
    };
    return {
      navigation,
      modules,
      nextEl,
      prevEl,
      onSlideChange,
    };
  },
};
</script>
<style scoped>
/* 轮播图 */
.container {
  width: 1100px;
  /* height: 400px; */
  position: relative;
  /* overflow: hidden; */
}

.swiperstyle {
  height: 500px;
  width: auto;
  --swiper-navigation-color: lightblue;
  --swiper-pagination-color: lightblue;
  /* transition: all 0.5s; */
}

.swiperimg {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

.container .title-block {
  position: absolute;
  top: 0;
  background-image: linear-gradient(
    to top,
    rgba(255, 0, 0, 0),
    rgba(0, 0, 0, 1)
  );
  width: 800px;
  height: 75px;
  z-index: 2;
}

.container .title-block .title {
  color: aliceblue;
  position: absolute;
  top: 15px;
  left: 25px;
}

/* 排行榜 */
.rank {
  width: 300px;
  height: 400px;
  background-color: white;
  border: 1px;
  /* border: 5px solid lightblue; */
}

.rank .rank-title {
  height: 45px;
  background-color: aqua;
  display: flex;
}

.rank .rank-main {
  position: absolute;
}

.el-card {
  width: auto;
  height: 100%;
}

.el-card .card-header {
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.card-list {
  font-size: 14px;
  /* border-bottom:1px solid lightgray; */
  height: 25px;
}

:focus-visible {
  outline: none;
}

/* 分类 */
.classify {
  height: 45px;
  background-color: white;
  /* box-shadow: inset grey; */
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 3px;
}

.classify ul {
  list-style-type: none;
  display: flex;
  height: 45px;
}
.classify ul li {
  position: relative;
  width: 75px;
  height: 45px;
}
.classify ul li a {
  display: block;
  text-align: center;
  background-color: transparent;
  text-decoration: none;
  color: black;
  font-size: large;
  height: 45px;
  line-height: 45px;
  transition: all 0.2s;
}
.classify ul li a:hover {
  /* background-color: aliceblue; */
  color: lightblue;
}

/* 推荐栏 */
.suggest-container {
  position: relative;
  /* padding: 25px 0 270px 270px; */
  /* width: 1170px; */
  /* background-color: beige; */
}
.suggest-container .suggest-title {
  font-size: larger;
  text-align: center;
  font-family: "loli", sans-serif;
  /* width: 1100px; */
  /* background-color: aquamarine; */
}
.book-container {
  position: relative;
  width: 1100px;
  height: auto;
  padding: 10px;
  /* background-color: aquamarine; */
}
.book-card {
  width: 150px;
  height: 200px;
}
</style>

<style scoped></style>
